<template>
  <div class="root">
    <!-- 分类标签 -->
    <a-space :size="12" style="margin-bottom: 10px">
      <a-select
        ref="select"
        v-model:value="page.class_name"
        placeholder="图书分类"
        style="width: 120px"
        @change="init()"
      >
        <a-select-option value="%%">全部</a-select-option>
        <a-select-option
          v-for="c in tagsAndClasses.classListEntity"
          v-bind:key="c.class_id"
          :value="c.class_name"
          >{{ c.class_name }}</a-select-option
        >
      </a-select>
      <a-select
        ref="select"
        v-model:value="page.label_name"
        placeholder="图书标签"
        style="width: 120px"
        @change="init()"
      >
        <a-select-option value="%%">全部</a-select-option>
        <a-select-option
          v-for="t in tagsAndClasses.labelListEntity"
          v-bind:key="t.label_id"
          :value="t.label_name"
          >{{ t.label_name }}</a-select-option
        >
      </a-select>
      <a-input-group compact>
        <a-select
          v-model:value="searchValue.id"
          placeholder="选择搜索内容"
          style="width: 150px"
        >
          <a-select-option value="0">书 名</a-select-option>
          <a-select-option value="1">作 者</a-select-option>
          <a-select-option value="2">I S B N</a-select-option>
        </a-select>
        <a-input-search
          v-model:value="searchValue.info"
          placeholder="输入搜索信息"
          style="width: 200px"
          enter-button
          @search="onSearch"
        />
      </a-input-group>
    </a-space>
    <a-list
      class="demo-loadmore-list"
      :loading="initLoading"
      item-layout="horizontal"
      :data-source="list"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <template #actions>
            <a key="list-loadmore-edit" @click="handelOpenDetail(item)">详情</a>
          </template>
          <a-skeleton avatar :title="false" :loading="!!item.loading" active>
            <a-list-item-meta :description="item.desc">
              <template #title>
                {{ item.bookBaseInfo.book_name }}
              </template>
              <template #avatar>
                <a-avatar :src="'http://' + item.fileList[0].file_url" />
              </template>
            </a-list-item-meta>
            <div>预约时间：{{ item.start_time }}</div>
          </a-skeleton>
        </a-list-item>
      </template>
    </a-list>
    <a-pagination class="pagination" v-model:current="current" :total="2" />
    <a-modal
      v-model:open="openDetail"
      :title="bookDetail.bookBaseInfo.book_name"
    >
      <template #footer>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="closeDetail"
          >确 &nbsp; 定</a-button
        >
      </template>
      <p>
        <a-tag
          v-for="t in bookDetail.labelList"
          v-bind:key="t.label_id"
          :bordered="false"
          color="blue"
          >{{ t.label_name }}</a-tag
        >
      </p>
      <p><span>简 &nbsp; 介：</span>{{ bookDetail.bookBaseInfo.info }}</p>
      <p>
        <span>作 &nbsp; 者：</span>
        <span v-for="a in bookDetail.authorList" v-bind:key="a.author_id"
          >{{ a.author_name }} &nbsp;</span
        >
      </p>
      <p><span>英文名：</span>{{ bookDetail.bookBaseInfo.book_code }}</p>
      <p>
        <span>I&nbsp;S&nbsp;B&nbsp;N：</span>
        {{ bookDetail.bookBaseInfo.isbn }}
      </p>
      <p><span>当前库存：</span>{{ bookDetail.bookBaseInfo.current_num }} 本</p>
      <p><span>图书类别：</span>{{ bookDetail.book_class }}</p>
      <p><span>总共库存：</span>{{ bookDetail.bookBaseInfo.total_num }} 本</p>
      <p><span>出版时间：</span>{{ bookDetail.bookBaseInfo.publi_time }}</p>
      <p>
        <span>平均评分：</span>
        <a-rate v-model:value="bookDetail.rate" allow-half disabled />
        <span>&nbsp; {{ bookDetail.rate }}</span>
      </p>
      <p><span>借阅数量：</span>{{ bookDetail.reserve_num }} 本</p>
      <p><span>预约时间：</span>{{ bookDetail.start_time }}</p>
      <p><span>预约本数：</span>{{ bookDetail.reserve_num }} 本</p>
    </a-modal>
  </div>
</template>
<script>
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
  LeftOutlined,
  RightOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, onMounted, ref, reactive, nextTick } from "vue";
import { get, del, post, getBlob, tip, removeLocalToken, ddo } from "@/common";
import moment from "moment";
import { init } from "echarts";
export default defineComponent({
  components: {
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
    LeftOutlined,
    RightOutlined,
  },
  setup() {
    const count = 3;
    const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
    const initLoading = ref(true);
    const loading = ref(false);
    const list = ref([]);
    const page = ref({
      pageNum: "1",
      pageSize: "5",
      author_name: "%%",
      label_name: "%%",
      class_name: "%%",
      isbn: "%%",
      book_name: "%%",
    });
    const openDetail = ref(false);
    const searchValue = reactive({
      id: undefined,
      info: undefined,
    });
    const tagsAndClasses = ref({
      classListEntity: [],
      labelListEntity: [],
    });
    var bookDetail = ref({
      bookBaseInfo: {
        book_code: "",
        book_id: "",
        book_name: "",
        current_num: "",
        info: "",
        isbn: "",
        publi_time: "",
        total_num: "",
        total_score: "",
      },
      book_id: "",
      borrow_time: "",
      desc: "",
      end_time: "",
      reserve_his_id: "",
      reserve_num: "",
      reserve_state: "",
      start_time: "",
      rate: "",
    });
    const getReserve = () => {
      initLoading.value = true;
      post("/reader/get_reserve_list", page.value).then((res) => {
        console.log(res);
        list.value = res.data.list.map((item) => {
          item.start_time = moment(item.start_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          item.bookBaseInfo.publi_time = moment(
            item.bookBaseInfo.publi_time
          ).format("YYYY-MM-DD HH:mm:ss");
          item.desc =
            " 简介：" +
            item.bookBaseInfo.info +
            " 当前库存：" +
            item.bookBaseInfo.current_num +
            " 本";
          return item;
        });
        initLoading.value = false;
      });
    };
    const onSearch = () => {
      switch (searchValue.id) {
        case "0":
          page.value.book_name = !searchValue.info
            ? "%%"
            : "%" + searchValue.info + "%";
          break;
        case "1":
          page.value.author_name = !searchValue.info
            ? "%%"
            : "%" + searchValue.info + "%";
          break;
        case "2":
          page.value.isbn = !searchValue.info
            ? "%%"
            : "%" + searchValue.info + "%";
          break;
      }
      init(() => {
        page.value.author_name = "%%";
        page.value.isbn = "%%";
        page.value.book_name = "%%";
      });
    };
    const handelOpenDetail = (item) => {
      openDetail.value = true;
      bookDetail.value = item;
      var n = bookDetail.value.bookBaseInfo.total_score;
      bookDetail.value.rate = Math.floor(n * 10) / 10;
    };
    const closeDetail = () => {
      openDetail.value = false;
      bookDetail.value = {
        bookBaseInfo: {
          book_code: "",
          book_id: "",
          book_name: "",
          current_num: "",
          info: "",
          isbn: "",
          publi_time: "",
          total_num: "",
          total_score: "",
        },
        book_id: "",
        borrow_time: "",
        desc: "",
        end_time: "",
        reserve_his_id: "",
        reserve_num: "",
        reserve_state: "",
        start_time: "",
        rate: "",
      };
    };
    const init = (cb) => {
      getReserve();
      getBookTagsAndClass();
      cb && cb();
    };
    const getBookTagsAndClass = () => {
      get("/reader/get_all_label_class").then((res) => {
        tagsAndClasses.value = res.data;
      });
    };
    init();
    return {
      count,
      fakeDataUrl,
      initLoading,
      loading,
      list,
      openDetail,
      bookDetail,
      searchValue,
      page,
      tagsAndClasses,
      init,
      onSearch,
      handelOpenDetail,
      closeDetail,
      getBookTagsAndClass,
    };
  },
});
</script>
<style lang="scss">
.root {
  height: 80%;
  padding: 20px;
  .cardRow {
    .card {
      margin: 10px;
    }
  }
  .input-group {
    margin: 10px;
  }
  .pagination {
    padding: 10px;
    text-align: right;
  }
}
</style>